import echarts from 'echarts'
/**
 * echartsId id元素
 * color颜色
 * title 标题
 * legendText  图例组件名字
 * Xdata
 * series
 */

//  X轴旋转
export function echartsFunction (echartsId, color, title, legendText, Xdata, series) {
  var myChart = echarts.init(document.getElementById(echartsId))
  var option = {
    color: color,
    grid: {
      top: '13%',
      left: '8%',
      right: '7%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    title: {
      text: title,
      top: 5,
      x: 'center',
      textStyle: {
        fontSize: 14,
        color: '#ADD8FF',
        fontWeight: 400
      }
    },
    legend: legendText,
    xAxis: {
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#0E578F',
          width: '1',
          opacity: 0.27
        }
      },
      type: 'category',
      // boundaryGap: false,
      axisLabel: {
        interval: 0,
        rotate: 40,
        textStyle: {
          color: '#ffffff',
          fontSize: 12
        }
      },
      data: Xdata
    },
    yAxis: {
      type: 'value',
      axisTick: { show: false },
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: '#0E578F',
          width: '1',
          opacity: 0.27
        }
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#3796F4',
          fontSize: 12
        }
      },
      axisLine: { show: false }
    },
    series: series
  }

  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
//  X轴不旋转
export function echartsFunctionNoXz (echartsId, color, title, legendText, Xdata, series, grid, unit, xUnit) {
  let myChart = echarts.init(document.getElementById(echartsId))
  let option = {
    color: color,
    grid: grid,
    tooltip: {
      trigger: 'axis'
    },
    title: {
      text: title,
      top: 5,
      x: 'center',
      textStyle: {
        fontSize: 14,
        color: '#ADD8FF',
        fontWeight: 400
      }
    },
    legend: legendText,
    xAxis: {
      axisTick: { show: false },
      name: xUnit,
      nameTextStyle: {
        color: '#3796F4',
        fontSize: 12,
        padding: [35, 30, 5, 0]
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#0E578F',
          width: '1',
          opacity: 0.27
        }
      },
      axisLabel: {
        textStyle: {
          color: '#3796F4',
          fontSize: 12
        }
      },
      type: 'category',
      // boundaryGap: false,
      data: Xdata
    },
    yAxis: {
      type: 'value',
      name: unit,
      nameTextStyle: {
        color: '#CAF1FD',
        fontSize: 14
      },
      axisTick: { show: false },
      nameGap: 10,
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: '#0E578F',
          opacity: 0.27,
          width: '1'
        }
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#3796F4',
          fontSize: 12
        }
      },
      axisLine: { show: false }
    },
    series: series
  }

  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
export function echartsFunctionNoXzt (echartsId, color, title, legendText, Xdata, series, grid, unit, xUnit) {
  let myChart = echarts.init(document.getElementById(echartsId))
  let option = {
    color: color,
    grid: grid,
    tooltip: {
      trigger: 'axis'
    },
    title: {
      text: title,
      top: 5,
      x: 'center',
      textStyle: {
        fontSize: 14,
        color: '#ADD8FF',
        fontWeight: 400
      }
    },
    legend: legendText,
    xAxis: {
      axisTick: { show: false },
      name: xUnit,
      nameTextStyle: {
        color: '#add8ff',
        fontSize: 12,
        padding: [35, 30, 5, 0]
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#104b80',
          width: '1',
          opacity: 0.27
        }
      },
      axisLabel: {
        textStyle: {
          color: '#add8ff',
          fontSize: 12
        }
      },
      type: 'category',
      // boundaryGap: false,
      data: Xdata
    },
    yAxis: {
      type: 'value',
      name: unit,
      nameTextStyle: {
        color: '#CAF1FD',
        fontSize: 14
      },
      axisTick: { show: false },
      nameGap: 10,
      splitLine: {
        lineStyle: {
          type: 'solid',
          color: '#104b80',
          width: '1'
        }
      },
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value}',
        textStyle: {
          color: '#add8ff',
          fontSize: 12
        }
      },
      axisLine: { show: false }
    },
    series: series
  }

  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
// 玫瑰图
const findValFun = (name, datas, textArr) => {
  let valIndex = textArr.findIndex((value, index, arr) => value == name)
  return datas[valIndex]
}
export function roseEchartsFun (elementId, datas, textArr, color, text, serie, unitDate) {
  let myChart = echarts.init(document.getElementById(elementId))
  let option = {
    color: color,
    title: {
      x: 'left'
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b}: <br>{c} ({d}%)'
    },
    toolbox: {
      show: false
    },
    legend: {
      icon: 'circle',
      show: true,
      orient: 'vertical',
      top: '10',
      right: '80',
      padding: [20, 5, 20, 5],
      formatter: function (name) {
        return name + '   ' + findValFun(name, unitDate, textArr)
      },
      itemGap: 20,
      textStyle: {
        fontSize: 12,
        color: '#ADD8FF'
      }
    },
    calculable: true,
    series: serie
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
//
export function roseEchartsFun2 (elementId, datas, textArr, color, text) {
  var series = []
  datas.xData.map((item, i) => {
    series.push({
      value: item,
      name: textArr[i],
      itemStyle: {
        normal: {
          borderWidth: 15,
          borderColor: color[i]
        }
      }
    })
  })
  var myChart = echarts.init(document.getElementById(elementId))
  var option = {
    color: color,
    // title: {
    //   text: '在线总数量',
    //   left: '17.5%',
    //   top: '36%',
    //   padding: [24, 0],
    //   textStyle: {
    //     color: '#fff',
    //     fontSize: 18,
    //     align: 'center'
    //   }
    // },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b}: <br>{c} ({d}%)'
    },
    toolbox: {
      show: false
    },
    legend: {
      icon: 'circle',
      orient: 'vertical',
      top: '10',
      right: '80',
      padding: [20, 5, 20, 5],
      itemGap: 20,
      textStyle: {
        fontSize: 12,
        color: '#FFFFFF'
      }
    },
    calculable: true,
    series: [{
      zlevel: 1,
      name: '数据采集',
      type: 'pie',
      selectedMode: 'single',
      radius: [85, 100],
      center: ['25%', '48%'],
      startAngle: '135',
      hoverAnimation: false,
      label: {
        show: false,
        position: 'inside',
        formatter: '{d}%'
      },
      data: series
    }]
  }
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
